<template>
    <div class="app-checkbox">
        <label>
            <input
                :id="'id-' + Math.random()"
                type="checkbox"
                :name="name"
                _value="localValue"
                @change="onChange"
            />
            <div class="inner">
                <UniconsCheck v-if="modelValue" />
            </div>
            <div v-if="label" class="label">
                {{ label }}
            </div>
        </label>
    </div>
</template>

<script setup lang="ts">
interface Props {
    name: string
    label?: string
    modelValue: boolean
}

interface Emits {
    (e: 'update:modelValue', value: boolean): void
}

const emit = defineEmits<Emits>()

const props = defineProps<Props>()

const onChange = () => {
    emit('update:modelValue', !props.modelValue)
}
</script>

<style lang="scss" scoped>
.app-checkbox {
    label {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
    }
    input {
        display: none;
    }
    .inner {
        width: 16px;
        height: 16px;
        border: 1px solid var(--color-border);
        border-radius: 3px;
        display: flex;
        align-items: center;
        background-color: var(--color-checkbox);
        :deep(svg) {
            position: relative;
            fill: var(--color-text);
        }
    }
}
</style>
